<script>
import ModifyEmail from "@/components/dialog/ModifyEmail.vue";
import ModifyPassword from "@/components/dialog/ModifyPassword.vue";

export default {
  name: "UserSetting",
  components: {ModifyPassword, ModifyEmail},
  data() {
    return {
      modify_email: false,
      modify_password:false
    }
  },
  methods:{
    closeModifyEmail(){
      this.modify_email = false
    }
  }
}
</script>

<template>
  <div class="us_div">
    <el-dialog :visible.sync="modify_email" title="修改邮箱" top="18vh" width="25%" append-to-body :destroy-on-close="true">
      <modify-email @closeModifyEmail="closeModifyEmail"></modify-email>
    </el-dialog>
    <el-dialog :visible.sync="modify_password" title="修改密码" top="18vh" width="25%" append-to-body  :destroy-on-close="true">
      <modify-password></modify-password>
    </el-dialog>
    <div class="us_line">
      <div style="width: 80px">登录名</div>
      <div class="us_text">{{ $store.state.user.username }}</div>
    </div>
    <div class="us_line" style="margin-top: 40px">
      <div style="width: 80px">邮件</div>
      <div class="us_text">{{ $store.state.user.email }}&nbsp;<a @click="modify_email=true">更改</a></div>
    </div>
    <div class="us_line" style="margin-top: 40px">
      <div style="width: 80px">密码</div>
      <div class="us_text"><a @click="modify_password = true">修改密码</a></div>
    </div>
    <div class="us_line" style="margin-top: 40px">
      <button>保存</button>
    </div>
  </div>
</template>

<style scoped>
.us_div {
  font-size: 17px;
  font-weight: bold;
  color: #222327;
}

.us_line {
  width: 350px;
  margin: 0 auto;
  display: flex;
}

.us_text {
  color: #707070;
}

.us_div a {
  text-decoration: underline;
  color: #409EFF;
}

.us_line button {
  margin: 0 auto;
  height: 50px;
  width: 100px;
  font-size: 18px;
  font-weight: bold;
  background-color: #409EFF;
  color: #ffffff;
  cursor: pointer;
  border: none;
  border-radius: 15px;
}
</style>